Switch to CSS variables #94
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Also update the readme and the commands. Fix javascript not getting compiled by the build action.
This means that we won't accidentally forget to exclude files.
This will make your SDDs/hard drives and your CPU happy while still doing exactly the same as before!
Get rid of NPM jobs that we dont need with eleventys passthroughs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Depends on #93
Backgorund
To support theming, (at least part of) co-design should switch to using CSS variables. This is because they are more powerful than SASS variables because they can be overridden based on scoping rules rather than statically compiled. This paves the way for defining multiple different themes such as dark mode or high-contrast mode.
CSS Variables
This PR serves as the first step in that process, by defining CSS variables based on the current SASS variables. This allows us to switch over while requiring minimal actual changes. However, from discussions in the frontend channel it seems that in the long run we may also want to stop defining color variations based on darkening or lightening other colors as we do now, which would remove the need for most SASS variables entirely.
Co-Design Fundamental Changes
This PR also makes a fundamental change to the definition of color classes in co-design. Currently co-design allows classes like
.is-redor.is-yellow. However, in a multi-themed world these classes make little sense. What is a good color contrast of red-on-white can be a horrible choice for other themes. Imagine having to set the "red" color to be something that is not "red". Instead, this PR also (attemts to) switch over to usingsuccess,warning,danger,info,muted, and other terms that actually hold meaning. For compatibility reasons, the old color classes are also still defined.TODO More info